<template>
  <div class='box'>
    <!-- 健康监测 -->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-card>
        <el-tab-pane label="血糖记录" name="first">
          <bloodsugar />
        </el-tab-pane>
        <el-tab-pane label="血压记录" name="second">
          <bloodpressure />
        </el-tab-pane>
        <el-tab-pane label="尿酸记录" name="third">
          <uricAcid />
        </el-tab-pane>
        <el-tab-pane label="血氧记录" name="fourth">
          <bloodOxygen />
        </el-tab-pane>
      </el-card>
    </el-tabs>
  </div>
</template>
 
<script setup lang='ts'>
defineOptions({ name: 'healthMonitorIndex' });//健康监测
import bloodsugar from '@/views/user/details/healthMonitor/bloodSugar.vue';
import bloodpressure from '@/views/user/details/healthMonitor/bloodPressure.vue';
import uricAcid from '@/views/user/details/healthMonitor/uricAcid.vue';
import bloodOxygen from '@/views/user/details/healthMonitor/bloodOxygen.vue';
import type { TabsPaneContext } from 'element-plus'
import { ref } from "vue";
// 顶部tab切换
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>
 
<style lang="scss" scoped>
.box {}
</style>